<template>
  <div>
    <el-dialog
      title="文章"
      :append-to-body="true"
      @close="closeDio"
      :visible.sync="dialogTableVisible"
      width="800px"
      style="padding:20px"
    >
      <el-table
        v-if="shopsList.data"
        ref="multipleTable"
        :data="shopsList.data"
        stripe
        header-row-class-name="head_color"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="标题" min-width="365">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button :loading="$store.state.isLoading" size="mini" @click="addShops(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="table_bottom">
          <el-col :span="24" class="tr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="shopsList.all_num"
            ></el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "xzNews",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      default: "table"
    }
  },
  data() {
    return {
      shopsList: this.$store.state.newsList || [],
      currentPage1: 1,
      pageSize: 10,
      dialogTableVisible: this.show,
      loading: false
    };
  },
  methods: {
    getNewsAll(page, page_size) {
      this.loading = true;
      this.$store.dispatch("getNewsList", { page, page_size });
      this.loading = false;
    },
    addShops(row) {
      row.url_title = "文章添加";
      this.$emit("sendShop", row);
      this.dialogTableVisible = false;
    },
    handleSizeChange(val) {
      this.getNewsAll("", val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.getNewsAll(val, this.pageSize);
    },
    closeDio() {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    }
  },
  watch: {
    show(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.dialogTableVisible = val1;
    },
    dialogTableVisible(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    },
    getMaterial(val) {
      // console.log(val)
      this.shopsList = val;
      console.log(this.shopsList);
    }
  },
  computed: {
    getMaterial() {
      return this.$store.state.newsList;
    }
  }
};
</script>
<style lang="less" scoped>
.list_ul {
  height: 610px;
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.card_list {
  line-height: 2;
  padding: 5px 0 0 5px;
}
.price_card {
  color: red;
}
</style>
